<template>
  <div class="min-h-screen flex items-center justify-center bg-gradient-to-br from-green-50 via-purple-50 to-indigo-50 px-4 py-12 sm:px-6 lg:px-8 relative overflow-hidden">
    <!-- 装饰元素 - 使用新主题色，调整位置 -->
    <div class="absolute top-0 left-0 w-full h-full overflow-hidden z-0 opacity-25">
      <div class="absolute top-10 right-10 w-64 h-64 bg-[#93dc24]/70 rounded-full mix-blend-multiply filter blur-3xl animate-blob"></div>
      <div class="absolute top-0 left-10 w-72 h-72 bg-[#8153ff]/70 rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-2000"></div>
      <div class="absolute -bottom-10 right-20 w-72 h-72 bg-[#93dc24]/70 rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-4000"></div>
      <div class="absolute -bottom-20 left-20 w-56 h-56 bg-[#8153ff]/60 rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-6000"></div>
    </div>
    
    <!-- 光效装饰 -->
    <div class="absolute inset-0 z-0">
      <div class="absolute top-1/3 right-1/4 w-96 h-96 bg-gradient-to-r from-[#93dc24]/10 to-transparent rounded-full filter blur-3xl animate-pulse-slow"></div>
      <div class="absolute bottom-1/3 left-1/4 w-96 h-96 bg-gradient-to-r from-[#8153ff]/10 to-transparent rounded-full filter blur-3xl animate-pulse-slow animation-delay-3000"></div>
    </div>
    
    <!-- 漂浮的几何元素 -->
    <div class="absolute inset-0 z-0 pointer-events-none">
      <div class="absolute top-[20%] left-[15%] w-6 h-6 bg-[#93dc24]/30 rounded-lg animate-float-slow"></div>
      <div class="absolute top-[70%] right-[15%] w-8 h-8 bg-[#8153ff]/30 rounded-full animate-float-slow animation-delay-1000"></div>
      <div class="absolute top-[40%] right-[25%] w-5 h-5 bg-[#93dc24]/30 rounded-md animate-float-slow animation-delay-2000 rotate-45"></div>
      <div class="absolute top-[60%] left-[25%] w-7 h-7 bg-[#8153ff]/30 rounded-md animate-float-slow animation-delay-3000 rotate-12"></div>
    </div>
    
    <div class="w-full max-w-md space-y-8 relative z-10">
      <!-- 返回按钮 -->
      <div class="absolute -top-10 left-0">
        <router-link to="/login" class="group flex items-center text-gray-600 hover:text-[#93dc24] transition-all duration-500">
          <span class="flex items-center justify-center h-8 w-8 rounded-full bg-white shadow-sm group-hover:shadow-[#93dc24]/20 group-hover:shadow-lg group-hover:scale-110 transition-all duration-500 ease-spring">
            <font-awesome-icon icon="arrow-left" class="text-sm transform transition-transform duration-500 group-hover:-translate-x-0.5" />
          </span>
          <span class="ml-2.5 text-sm font-medium opacity-0 -translate-x-3 group-hover:opacity-100 group-hover:translate-x-0 transition-all duration-500 ease-spring">返回登录</span>
        </router-link>
      </div>
      
      <!-- Logo和标题 - 使用新主题色 -->
      <div class="text-center">
        <div class="mx-auto h-24 w-24 rounded-2xl bg-gradient-to-br from-[#93dc24] to-[#8153ff] flex items-center justify-center shadow-lg transform transition-all duration-700 ease-spring hover:scale-110 hover:shadow-xl hover:rotate-6 hover:shadow-[#93dc24]/30 group/logo animate-fade-in-up relative" style="--delay: 200ms;">
          <div class="absolute inset-0 rounded-2xl bg-gradient-to-br from-[#93dc24] to-[#8153ff] opacity-50 blur-md group-hover/logo:blur-lg transition-all duration-700"></div>
          <font-awesome-icon icon="user-plus" class="text-white text-3xl relative z-10 transform transition-all duration-700 ease-spring group-hover/logo:scale-125" />
        </div>
        <h1 class="mt-6 text-3xl font-extrabold text-transparent bg-clip-text bg-gradient-to-r from-[#93dc24] to-[#8153ff] animate-fade-in-up animate-gradient-x" style="--delay: 400ms;">创建新账号</h1>
        <p class="mt-2 text-sm text-gray-600 animate-fade-in-up" style="--delay: 600ms;">注册AI智能助手，开启智能对话之旅</p>
      </div>
      
      <!-- 注册表单 -->
      <div class="mt-10 bg-white p-8 rounded-2xl shadow-sm border border-gray-100 transform transition-all duration-700 hover:scale-[1.02] hover:shadow-lg hover:shadow-[#93dc24]/10 animate-fade-in-up relative overflow-hidden group/form" style="--delay: 800ms;">
        <!-- 表单背景装饰 -->
        <div class="absolute -right-20 -bottom-20 w-40 h-40 bg-gradient-to-br from-[#93dc24]/10 to-[#8153ff]/10 rounded-full transition-all duration-700 blur-xl opacity-0 group-hover/form:opacity-70"></div>
        <div class="absolute -left-20 -top-20 w-40 h-40 bg-gradient-to-br from-[#8153ff]/10 to-[#93dc24]/10 rounded-full transition-all duration-700 blur-xl opacity-0 group-hover/form:opacity-70"></div>
        
        <div class="relative z-10">
          <RegisterForm />
        </div>
      </div>
      
      <!-- 登录引导 -->
    
      
      <!-- 页脚 -->
      <div class="mt-10 text-center animate-fade-in-up" style="--delay: 1200ms;">
        <p class="text-xs text-gray-500">© {{ new Date().getFullYear() }}胡萝卜昆</p>
        <div class="mt-4 flex justify-center space-x-4">
          <a href="#" class="text-gray-400 hover:text-[#93dc24] transition-colors duration-500 relative group/link">
            <span class="sr-only">隐私政策</span>
            <span class="text-xs">隐私政策</span>
            <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-[#93dc24] group-hover/link:w-full transition-all duration-500 ease-spring opacity-70"></span>
          </a>
          <a href="#" class="text-gray-400 hover:text-[#93dc24] transition-colors duration-500 relative group/link">
            <span class="sr-only">服务条款</span>
            <span class="text-xs">服务条款</span>
            <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-[#93dc24] group-hover/link:w-full transition-all duration-500 ease-spring opacity-70"></span>
          </a>
          <a href="#" class="text-gray-400 hover:text-[#8153ff] transition-colors duration-500 relative group/link">
            <span class="sr-only">联系我们</span>
            <span class="text-xs">联系我们</span>
            <span class="absolute bottom-0 left-0 w-0 h-0.5 bg-[#8153ff] group-hover/link:w-full transition-all duration-500 ease-spring opacity-70"></span>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import RegisterForm from '../../components/auth/RegisterForm.vue';
</script>

<style scoped>
/* 动画样式 */
.animate-blob {
  animation: blob-bounce 12s infinite ease;
}

.animation-delay-2000 {
  animation-delay: 2s;
}

.animation-delay-4000 {
  animation-delay: 4s;
}

.animation-delay-6000 {
  animation-delay: 6s;
}

.animation-delay-1000 {
  animation-delay: 1s;
}

.animation-delay-3000 {
  animation-delay: 3s;
}

/* 增加更多酷炫的动画效果 */
.animate-pulse-slow {
  animation: pulse-slow 8s infinite ease-in-out;
}

/* 漂浮元素动画 */
.animate-float-slow {
  animation: float-slow 10s infinite ease-in-out;
}

@keyframes float-slow {
  0%, 100% {
    transform: translateY(0) rotate(0);
  }
  25% {
    transform: translateY(-15px) rotate(5deg);
  }
  50% {
    transform: translateY(0) rotate(0);
  }
  75% {
    transform: translateY(15px) rotate(-5deg);
  }
}

@keyframes pulse-slow {
  0%, 100% {
    opacity: 0.3;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.1);
  }
}

@keyframes blob-bounce {
  0% {
    transform: translate(0px, 0px) scale(1);
  }
  33% {
    transform: translate(20px, -30px) scale(1.1);
  }
  66% {
    transform: translate(-20px, 30px) scale(0.9);
  }
  100% {
    transform: translate(0px, 0px) scale(1);
  }
}

/* 添加弹性动画 */
.ease-spring {
  transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 渐变动画 */
.animate-gradient-x {
  background-size: 200% 200%;
  animation: gradient-x 8s ease infinite;
}

@keyframes gradient-x {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* 淡入动画 */
.animate-fade-in-up {
  opacity: 0;
  transform: translateY(20px);
  animation: fade-in-up 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  animation-delay: var(--delay, 0ms);
}

@keyframes fade-in-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style> 